import { atom, useAtom } from 'jotai';
import { useMemo } from 'react';

// MARK: 1、创建原子状态
const priceAtom = atom(10)
const messageAtom = atom('hello')
const productAtom = atom({ id: 12, name: 'good stuff' })

// create derived atom，类似于 recoil 的 selector
const readOnlyAtom = atom((get) => get(priceAtom) * 2)

const writeOnlyAtom = atom(
  null, // 习惯上第一个参数传 null
  (get, set, update: { discount: number }) => {
    // update 我们在接受到要更新这个 atom 时获取的一个单独的值
    set(priceAtom, get(priceAtom) - update.discount)
    // 或者我们通过 set 的第二个参数，其中可以接受到最新的 atom 值
    set(priceAtom, (price) => price - update.discount)
  },
)

// MARK: 2、创建派生状态
const readWriteAtom = atom(
  (get) => get(priceAtom) * 2,
  (get, set, newPrice: number) => {
    set(priceAtom, newPrice / 2)
    // 你可以同时设置尽可能多的 atom
  },
)

const counter = atom(0);

export default function Page() {
  // MARK: 3、使用 useAtom 消费数据
  const [count, setCounter] = useAtom(counter);
  const onClick = () => setCounter(prev => prev + 1);
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={onClick}>Click</button>
    </div>
  )
}
